/**
 * Created by zhangsong on 2019/11/5.
 */
import React, { Component } from 'react';
import { FormattedMessage, formatMessage } from '@/utils/i18n';
import { stringToHex } from '@/utils/utils';
import { Button, Col, Input, Modal, Row, Spin } from 'antd';
import Style from './index.module.scss';
import { forceRegisterSuccess, registerEface } from '../../services/application/contractor';
import Alert from '../Modal';

export default class ReaderCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 是否是机器输入
      isMachine: true,
      value: '',
      loading: false,
    };
  }

  onChange = ({ target: { value } }) => {
    this.setState({
      value,
    });
  };

  toggleModel = () => {
    const { isMachine } = this.state;
    this.setState({
      isMachine: !isMachine,
    });
  };

  handleOk = () => {
    this.setState({
      loading: true,
    });
    const { sure, record } = this.props;
    const { isMachine } = this.state;
    let { value } = this.state;
    if (isMachine) {
      // 如果是读卡器输入,则进行转换
      // value = value;
      value = stringToHex(value);
    }
    registerEface({
      contractorId: record.id,
      icCardNum: value,
    })
      .then(() => {
        this.setState({
          loading: false,
        });
        Alert.success(formatMessage('baseInfo.operatorSuccess')).then(() => {
          sure();
        });
      })
      .catch(e => {
        this.setState({
          loading: false,
        });
        let { message } = e;
        const { data = {} } = e;
        if (data.message) {
          // eslint-disable-next-line prefer-destructuring
          message = data.message;
        }
        Alert.error(message);
      });
  };

  handleCancel = () => {
    const { cancel } = this.props;
    cancel();
  };

  handleForceSuccess = () => {
    this.setState({
      loading: true,
    });
    const { record = {}, sure } = this.props;
    forceRegisterSuccess(record.id)
      .then(() => {
        this.setState({
          loading: false,
        });
        Alert.success(formatMessage('baseInfo.operatorSuccess')).then(() => {
          sure();
        });
      })
      .catch(e => {
        this.setState({
          loading: false,
        });
        console.error(e);
        Alert.error(e.message);
      });
  };

  render() {
    const { record } = this.props;
    const { value, isMachine } = this.state;

    return (
      <Modal
        title={formatMessage('applicationCommon.readerCard.modalTitle')}
        visible
        confirmLoading={this.state.loading}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        okText={formatMessage('button.save')}
        cancelText={formatMessage('button.cancel')}
      >
        <Spin spinning={this.state.loading}>
          <Row>
            <Col xs={12}>
              <FormattedMessage id="applicationContractor.columns.surname.name" />:{record.surname}
            </Col>
            <Col xs={12}>
              <FormattedMessage id="applicationCommon.readerCard.status.name" />:
              {formatMessage(`applicationCommon.readerCard.status.${record.efaceStatus}`)}
            </Col>
          </Row>
          {record.efaceStatus === -1 ? (
            <Row>
              <Col>{record.remark}</Col>
            </Row>
          ) : null}
          <div className={Style.modalWrapper}>
            <div className={Style.title}>
              <FormattedMessage id="applicationCommon.readerCard.machineTips" />:
            </div>
            {isMachine ? (
              <Input onChange={this.onChange} value={value} type="password" autoFocus="autofocus" />
            ) : (
              <Input onChange={this.onChange} value={value} autoFocus="autofocus" />
            )}
            <div className={Style.buttonWrapper}>
              <Button size="small" onClick={this.toggleModel}>
                {isMachine
                  ? formatMessage('applicationCommon.readerCard.toggleManual')
                  : formatMessage('applicationCommon.readerCard.toggleMachine')}
              </Button>
              {record.efaceStatus !== 1 ? (
                <Button size="small" type="primary" onClick={this.handleForceSuccess}>
                  <FormattedMessage id="applicationCommon.readerCard.forceUpdateToSuccess" />
                </Button>
              ) : null}
            </div>
          </div>
        </Spin>
      </Modal>
    );
  }
}
